<template>
  <div class="container-information">
    <div class="information" style="justify-content: space-between">
      <div class="flex-layout">
        <div class="buneiss-blno">物流单号：{{ detailData.doccode }}</div>
        <div class="flex-layout">
          <span class="status-info">当前状态：</span>
          <div class="status-cirlce"></div>
          <span class="status-content">{{ state.currentStatus }}</span>
        </div>
      </div>
      <!-- <div class="status-info">
        {{
          detailData.bookingState == 0
            ? '草拟'
            : detailData.bookingState == -1
            ? '驳回'
            : detailData.bookingState == 1
            ? '通过'
            : ''
        }}
      </div> -->
      <div
        class="flex-layout"
        @click="addEmployee(detailData)"
        style="cursor: pointer"
      >
        <img src="@/assets/business/businessCompany.png" alt="" />
        <span class="btn-style">我司人员</span>
      </div>
    </div>
    <div class="information flex-layout">
      <div class="flex-layout">
        <div class="information-label">委托单号：</div>
        <div
          v-for="(item, index) in consignmentNoList"
          :key="index"
          class="single-consignment"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- <div class="information flex-layout content-container">
      <div class="flex-layout">
        <div class="information-label-left">业务类型：</div>
        <div>海运出口，{{ detailData.fclLcl ? detailData.fclLcl : '--' }}</div>
      </div>
      <div class="flex-layout">
        <div class="information-label-right">服务类型：</div>
        <div>{{ detailData.seviceType.join('、') }}</div>
      </div>
    </div>
    <div class="information flex-layout content-container">
      <div class="flex-layout">
        <div class="information-label-left">委托单位：</div>
        <div>{{ detailData.requester ? detailData.requester : '--' }}</div>
      </div>
      <div class="flex-layout">
        <div class="information-label-right">货物类型：</div>
        <div>{{ detailData.fclLcl }}</div>
        <span class="btn-style" v-if="stepShow" @click="modifyMessage"
          >修改</span
        >
      </div>
    </div>
    <div class="information flex-layout content-container">
      <div class="flex-layout">
        <div class="information-label-left">订舱单位：</div>
        <div>
          {{ detailData.bookingParty ? detailData.bookingParty : '--' }}
        </div>
      </div>
      <div class="flex-layout">
        <div class="information-label-right">订舱单位联系：</div>
        <div>
          {{ detailData.telephone ? detailData.telephone : '--' }}
        </div>
        <span class="btn-style" @click="modifyBooking">修改</span>
      </div>
    </div> -->
    <div
      class="information flex-layout content-container"
      style="margin-bottom: 8px"
    >
      <div class="flex-layout">
        <div class="information-label-left">创建人员：</div>
        <div>{{ detailData.createBy ? detailData.createBy : '--' }}</div>
      </div>
      <div class="flex-layout">
        <div class="information-label-right">最后修改人员：</div>
        <div>{{ detailData.updateBy ? detailData.updateBy : '--' }}</div>
      </div>
    </div>
    <div class="information flex-layout content-container">
      <div class="flex-layout">
        <div class="information-label-left">创建时间：</div>
        <div>
          {{
            detailData.createTime
              ? $utils.formatDateTime(
                  detailData.createTime,
                  'YYYY-MM-DD HH:mm:ss'
                )
              : '--'
          }}
        </div>
      </div>
      <div class="flex-layout" style="margin-right: 150px">
        <div class="information-label-right">最后修改时间：</div>
        <div>
          {{
            detailData.updateTime
              ? $utils.formatDateTime(
                  detailData.updateTime,
                  'YYYY-MM-DD HH:mm:ss'
                )
              : '--'
          }}
        </div>
      </div>
    </div>
  </div>
  <div class="step-container" v-if="stepShow">
    <div class="step-inner">
      <div class="step-item">
        <div class="step-circle" :class="true ? 'active' : 'un-active'"></div>
        <div class="step-text">创建</div>
        <div class="step-time">
          {{
            detailData.createTime
              ? $utils.formatDateTime(detailData.createTime, 'MM-DD HH:mm')
              : '--'
          }}
        </div>
      </div>
      <div class="step-gap" :class="true ? 'active' : 'un-active'"></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="
            state.stepData.booking_space.flag ||
            state.stepData.booking_space.stateTime
              ? 'active'
              : 'un-active'
          "
        ></div>
        <!--     boex-number      @click.stop="openBoxHistory(state.stepData.booking_space)" -->
        <div class="step-text">订舱</div>
        <div class="step-time">
          {{
            state.stepData.booking_space.stateTime
              ? $utils.formatDateTime(
                  state.stepData.booking_space.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.booking_space.stateTime ? 'active' : 'un-active'"
      ></div>
      <!-- <div class="step-item">
        <div
          class="step-circle"
          :class="
            state.stepData.release_space.stateTime ? 'active' : 'un-active'
          "
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.release_space)"
        >
          放舱
        </div>
        <div class="step-time">
          {{
            state.stepData.release_space.stateTime
              ? $utils.formatDateTime(
                  state.stepData.release_space.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.release_space.stateTime ? 'active' : 'un-active'"
      ></div> -->
      <div class="step-item">
        <div
          class="step-circle"
          :class="
            state.stepData.release_container.flag ? 'active' : 'un-active'
          "
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.release_container)"
        >
          放箱
        </div>
        <div class="step-time">
          {{
            state.stepData.release_container.stateTime
              ? $utils.formatDateTime(
                  state.stepData.release_container.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.release_container.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.pick_container.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.pick_container)"
        >
          提柜<span>{{ state.stepData.pick_container.containerSize }}</span>
        </div>
        <div class="step-time">
          {{
            state.stepData.pick_container.stateTime
              ? $utils.formatDateTime(
                  state.stepData.pick_container.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.pick_container.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.enter_port.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.enter_port)"
        >
          进港<span>{{ state.stepData.enter_port.containerSize }}</span>
        </div>
        <div class="step-time">
          {{
            state.stepData.enter_port.stateTime
              ? $utils.formatDateTime(
                  state.stepData.enter_port.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.enter_port.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.customs_release.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.customs_release)"
        >
          海放<span>{{ state.stepData.customs_release.containerSize }}</span>
        </div>
        <div class="step-time">
          {{
            state.stepData.customs_release.stateTime
              ? $utils.formatDateTime(
                  state.stepData.customs_release.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.customs_release.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.wharf_release.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.wharf_release)"
        >
          码放
        </div>
        <div class="step-time">
          {{
            state.stepData.wharf_release.stateTime
              ? $utils.formatDateTime(
                  state.stepData.wharf_release.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.wharf_release.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.ship_open.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.ship_open)"
        >
          船开
        </div>
        <div class="step-time">
          {{
            state.stepData.ship_open.stateTime
              ? $utils.formatDateTime(
                  state.stepData.ship_open.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.ship_open.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.arrive_port.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.arrive_port)"
        >
          抵港
        </div>
        <div class="step-time">
          {{
            state.stepData.arrive_port.stateTime
              ? $utils.formatDateTime(
                  state.stepData.arrive_port.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.arrive_port.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.unloading.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.unloading)"
        >
          卸货<span>{{ state.stepData.unloading.containerSize }}</span>
        </div>
        <div class="step-time">
          {{
            state.stepData.unloading.stateTime
              ? $utils.formatDateTime(
                  state.stepData.unloading.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
      <div
        class="step-gap"
        :class="state.stepData.unloading.flag ? 'active' : 'un-active'"
      ></div>
      <div class="step-item">
        <div
          class="step-circle"
          :class="state.stepData.pick_cargo.flag ? 'active' : 'un-active'"
        ></div>
        <div
          class="step-text boex-number"
          @click.stop="openBoxHistory(state.stepData.pick_cargo)"
        >
          提货
        </div>
        <div class="step-time">
          {{
            state.stepData.pick_cargo.stateTime
              ? $utils.formatDateTime(
                  state.stepData.pick_cargo.stateTime,
                  'MM-DD HH:mm'
                )
              : ''
          }}
        </div>
      </div>
    </div>
  </div>
  <docDetailAddEmployee ref="docDetailAddEmployeeRef"></docDetailAddEmployee>
  <docDetailCreate ref="docDetailCreateRef" :isCreate="false"></docDetailCreate>
  <docDetailContactLink
    ref="docDetailContactLinkRef"
    :detailData="detailData"
  ></docDetailContactLink>
  <docBoxesHistory
    ref="docBoxesHistoryRef"
    @getSetpData="getStepData"
  ></docBoxesHistory>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import docDetailAddEmployee from './docDetailAddEmployee.vue'
import docBoxesHistory from './docBoxesHistory.vue'
import docDetailCreate from './docDetailCreate.vue'
import docDetailContactLink from '../newBusiness/docDetailContactLink.vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'
import request from '@/public/request'

const Router = useRouter()
const Route = useRoute()
const store = useStore()

const props = defineProps({
  //详细数据
  detailData: {
    type: Object,
    default: () => {}
  },
  // 是否先订舱进度
  stepShow: {
    type: Boolean,
    default: true
  },
  // 委托单号数量
  consignmentNoList: {
    type: Array,
    default: () => []
  }
})

// const emit = defineEmits(['refresh'])

// function getData() {
//   emit('refresh')
// }

const state = reactive({
  timeShow: false,
  detailsVisibleFirst: false,
  // stepData
  currentStatus: '创建',
  stepData: {
    booking_space: {
      stateFlag: 'booking_space',
      stateTime: undefined,
      flag: false,
      stateOrder: 0
    }, //订舱
    // release_space: {
    //   stateFlag: 'release_space',
    //   stateTime: undefined,
    //   stateOrder:1,
    // }, //放舱
    release_container: {
      stateFlag: 'release_container',
      stateTime: undefined,
      flag: false,
      stateOrder: 1
    }, //放箱
    pick_container: {
      stateFlag: 'pick_container',
      stateTime: undefined,
      flag: false,
      stateOrder: 2,
      containerSize: ''
    }, //提柜
    enter_port: {
      stateFlag: 'enter_port',
      stateTime: undefined,
      flag: false,
      stateOrder: 3,
      containerSize: ''
    }, //进港
    customs_release: {
      stateFlag: 'customs_release',
      stateTime: undefined,
      flag: false,
      stateOrder: 4,
      containerSize: ''
    }, //海放
    wharf_release: {
      stateFlag: 'wharf_release',
      stateOrder: 5,
      flag: false,
      stateTime: undefined
    }, //码放
    ship_open: {
      stateFlag: 'ship_open',
      stateOrder: 6,
      flag: false,
      stateTime: undefined
    }, //船开
    arrive_port: {
      stateFlag: 'arrive_port',
      stateOrder: 7,
      flag: false,
      stateTime: undefined
    }, //抵港
    unloading: {
      stateFlag: 'unloading',
      stateTime: undefined,
      stateOrder: 8,
      flag: false,
      containerSize: ''
    }, //卸货
    pick_cargo: {
      stateFlag: 'pick_cargo',
      stateOrder: 9,
      flag: false,
      stateTime: undefined
    } //提货
  }
})

const emit = defineEmits(['getBookingState'])

onMounted(() => {
  getStepData()
})

defineExpose({
  getStepData
})

const docDetailAddEmployeeRef = ref(null)
const docDetailCreateRef = ref(null)
const docDetailContactLinkRef = ref(null)
const docBoxesHistoryRef = ref(null)

// 获取当前流程的数据
async function getStepData() {
  let res = await request.post('/api/containerstate/querydetail', {
    BookingId: Route.query.id,
    StateFlag: ''
  })
  const needBoxSize = [
    'pick_container',
    'enter_port',
    'customs_release',
    'unloading'
  ]
  resetStepData()
  let keysLissRef = Object.keys(res.groupedDic)
  for (const iterator of keysLissRef) {
    state.stepData[iterator] = res.groupedDic[iterator][0]
    if (needBoxSize.indexOf(iterator) != -1) {
      if (res.groupedDic[iterator].length) {
        let hasTime = 0
        for (const item of res.groupedDic[iterator]) {
          if (item.stateTime) {
            hasTime += 1
          }
          state.stepData[iterator].containerSize =
            hasTime + '/' + res.groupedDic[iterator].length
        }
      }
      // setBoxSize(iterator)
    }
  }
  // 获取当前订舱数据的状态
  getCurrentStatusInfo(res.maxOrder)
  if (res.maxOrder) {
    let stepKays = Object.keys(state.stepData)
    for (const itemKeys of stepKays) {
      if (state.stepData[itemKeys].stateOrder <= res.maxOrder) {
        state.stepData[itemKeys].flag = true
      }
    }
  }
  emit('getBookingState', state.stepData.booking_space.stateTime)
}

function getCurrentStatusInfo(maxOrder) {
  switch (maxOrder) {
    case 0:
      state.currentStatus = '订舱'
      break
    case 1:
      state.currentStatus = '放箱'
      break
    case 2:
      state.currentStatus = '提柜'
      break
    case 3:
      state.currentStatus = '进港'
      break
    case 4:
      state.currentStatus = '海放'
      break
    case 5:
      state.currentStatus = '码放'
      break
    case 6:
      state.currentStatus = '船开'
      break
    case 7:
      state.currentStatus = '抵港'
      break
    case 8:
      state.currentStatus = '卸货'
      break
    case 9:
      state.currentStatus = '提货'
      break
  }
}

// 重置所有数据
function resetStepData() {
  state.stepData = {
    booking_space: {
      stateFlag: 'booking_space',
      stateTime: undefined,
      flag: false,
      stateOrder: 0
    }, //订舱
    // release_space: {
    //   stateFlag: 'release_space',
    //   stateTime: undefined,
    //   stateOrder:1,
    // }, //放舱
    release_container: {
      stateFlag: 'release_container',
      stateTime: undefined,
      flag: false,
      stateOrder: 1
    }, //放箱
    pick_container: {
      stateFlag: 'pick_container',
      stateTime: undefined,
      flag: false,
      stateOrder: 2,
      containerSize: ''
    }, //提柜
    enter_port: {
      stateFlag: 'enter_port',
      stateTime: undefined,
      flag: false,
      stateOrder: 3,
      containerSize: ''
    }, //进港
    customs_release: {
      stateFlag: 'customs_release',
      stateTime: undefined,
      flag: false,
      stateOrder: 4,
      containerSize: ''
    }, //海放
    wharf_release: {
      stateFlag: 'wharf_release',
      stateOrder: 5,
      flag: false,
      stateTime: undefined
    }, //码放
    ship_open: {
      stateFlag: 'ship_open',
      stateOrder: 6,
      flag: false,
      stateTime: undefined
    }, //船开
    arrive_port: {
      stateFlag: 'arrive_port',
      stateOrder: 7,
      flag: false,
      stateTime: undefined
    }, //抵港
    unloading: {
      stateFlag: 'unloading',
      stateTime: undefined,
      stateOrder: 8,
      flag: false,
      containerSize: ''
    }, //卸货
    pick_cargo: {
      stateFlag: 'pick_cargo',
      stateOrder: 9,
      flag: false,
      stateTime: undefined
    } //提货
  }
}

// 当前添加的箱子的已填写时间的个数
async function setBoxSize(keys) {
  let res = await request.post('/api/containerstate/query', {
    BookingId: Route.query.id,
    StateFlag: keys
  })
  let hasTime = 0
  for (const iterator of res.content) {
    if (iterator.stateTime) {
      hasTime += 1
    }
  }
  state.stepData[keys].containerSize = hasTime + '/' + res.content.length
}

// 添加公司员工
function addEmployee(row) {
  docDetailAddEmployeeRef.value.open(row)
}
// 修改业务信息
function modifyMessage() {
  docDetailCreateRef.value.open(props.detailData)
}
// 修改订舱信息
function modifyBooking() {
  docDetailContactLinkRef.value.open()
}
// 显示详细事件变动
function showDetailTime() {
  state.detailsVisibleFirst = true
}
// 打开提柜记录
function openBoxHistory(stepKey) {
  docBoxesHistoryRef.value.open(stepKey)
}
function closeDetailsTime() {
  state.detailsVisibleFirst = false
}
</script>
<style lang="scss">
.time-contaienr {
  // position: fixed !important;
  .has-change {
    color: #ffffff;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    background-color: #5a9cf8;
    margin-left: 4px;
  }

  .time-text {
    margin-bottom: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0px;
  }

  .time-text span:hover {
    text-decoration: underline;
    color: #69a5f8;
    cursor: pointer;
  }
}
</style>

<style lang="scss" scoped>
.container-information {
  border-radius: 2px;
  background: #ffffff;
  margin-bottom: 12px;
  padding: 8px 12px;

  .information {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .status-info {
      // border-radius: 2px;
      // background: #d9d9d919;
      // border: 1px solid #d9d9d9;
      // padding: 2px 4px;
      // color: #00000099;
      // font-family: PingFang SC;
      // font-weight: normal;
      // font-size: 12px;
      // letter-spacing: 0px;
      // text-align: center;
      // margin-left: 12px;
      margin-left: 16px;
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: normal;
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
    }

    .status-content {
      color: #000000d8;
      font-family: PingFang HK;
      font-weight: normal;
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      margin-left: 2px;
    }

    .buneiss-blno {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
    }

    .status-cirlce {
      background: #69c64c;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
  }

  img {
    width: 16px;
    height: 16px;
    margin-left: 20px;
  }

  .btn-style {
    color: #5a9cf8;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
    letter-spacing: 0px;
    cursor: pointer;
  }

  .information:last-child {
    margin-bottom: 0px;
  }

  .information-label {
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFang SC;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0px;
  }

  .single-consignment {
    color: #3b78ff;
    font-family: Helvetica;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0px;
    text-decoration: underline;
    padding-left: 4px;
    padding-right: 4px;
    background: #e6f7ff;
    margin-left: 4px;
  }

  .content-container {
    color: #00000099;
    font-family: PingFang SC;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0px;

    .information-label-left {
      width: 60px;
    }

    .information-label-right {
      width: 84px;
      text-align: right;
    }
  }
  .content-container > div {
    margin-right: 96px;
    min-width: 224px;
  }
  .content-container .flex-layout > div:nth-child(2) {
    min-width: 108px;
  }
}

.step-container {
  border-radius: 2px;
  background: #ffffff;
  padding: 12px 18px;
  margin-bottom: 12px;

  .step-inner {
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 64px;

    .step-line {
      width: calc(100% - 30px);
      flex: 1;
    }

    .step-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-bottom: 8px;
    }

    .step-text {
      color: #000000d8;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
    }

    .step-time {
      color: #00000099;
      font-family: Helvetica;
      font-weight: normal;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: center;
    }

    img {
      width: 30px;
    }
    .bar {
      height: 1px;
      background-color: #bfdaf0;
    }

    .active-bar {
      height: 1px;
      background-color: #5a9cf8;
    }
  }

  .un-active {
    background: #5a9cf83f;
  }

  .active {
    background: #5a9cf8;
  }

  .time-history {
    font-size: 12px;
    color: #36a9f8;
    display: flex;
    align-items: center;
  }
  .boex-number:hover {
    color: #36a9f8;
    cursor: pointer;
  }

  .step-gap {
    width: 24px;
    height: 2px;
    margin-left: 12px;
    margin-right: 12px;
    flex: 0 0 auto;
    margin-top: 5px;
  }

  .step-text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-top: 8px;
    .unreach {
      color: #00000073;
      font-family: Microsoft YaHei;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0px;
    }

    .reach {
      color: #000000d9;
      font-family: Microsoft YaHei;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 0px;
    }
  }
}

.table-title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  line-height: 20px;
}

.flex-layout {
  display: flex;
  align-items: center;
}
</style>
